import t from '@/utils/i18n';
import VuiElement from '../../base/element';
import { createEle, createSpan } from '../../dom';
import './style.css';

export default class VuiPagination extends VuiElement {
  constructor(config) {
    super();
    this._className = {
      container: 'vui-pagination-container',
      pagination: 'vui-pagination',
      total: 'vui-pagination-total',
      btn: 'vui-pagination-btn',
      pager: 'vui-pager',
      number: 'number'
    };
    const defaultConfig = {};
    Object.assign(this._config, defaultConfig, config);
  }

  initUI() {
    this.initContainer();

    const pagination = this.createPagination();

    this.append([pagination]);
  }

  createPagination() {
    const cls = this._className;
    const config = this._config;
    const pagination = createEle('div', { className: cls.pagination });
    const pager = this.createPager();
    const prevBtn = this.createButton('previousPage');
    const nextBtn = this.createButton('nextPage');

    prevBtn.setAttribute('disabled', true);

    // 点击页数的active状态转换事件
    pager.addEventListener(
      'click',
      e => {
        if (e.target.nodeName === 'UL') {
          return;
        }

        Array.from(pager.children).forEach(item => {
          item.classList.remove('active');
        });

        if (e.target.previousSibling !== null && e.target.nextSibling !== null) {
          prevBtn.removeAttribute('disabled');
          nextBtn.removeAttribute('disabled');
        } else if (e.target.previousSibling === null && e.target.nextSibling !== null) {
          prevBtn.setAttribute('disabled', true);
          nextBtn.removeAttribute('disabled');
        } else if (e.target.nextSibling === null && e.target.previousSibling !== null) {
          nextBtn.setAttribute('disabled', true);
          prevBtn.removeAttribute('disabled');
        }

        e.target.classList.add('active');
        config.watchPage.call(null, 10, parseInt(e.target.innerText));
      },
      false
    );

    // 点击上一页
    prevBtn.addEventListener(
      'click',
      () => {
        Array.from(pager.children).forEach(item => {
          if (item.classList.contains('active')) {
            if (item.previousSibling.previousSibling === null) {
              item.classList.remove('active');
              item.previousSibling.classList.add('active');
              prevBtn.setAttribute('disabled', true);
              nextBtn.removeAttribute('disabled');
              config.watchPage.call(null, 10, parseInt(item.previousSibling.innerText));
            } else {
              item.classList.remove('active');
              item.previousSibling.classList.add('active');
              nextBtn.removeAttribute('disabled');
              config.watchPage.call(null, 10, parseInt(item.previousSibling.innerText));
            }
          }
        });
      },
      false
    );

    // 点击下一页
    nextBtn.addEventListener(
      'click',
      () => {
        const pagerChildren = Array.from(pager.children);
        for (let i = 0; i < pagerChildren.length; i++) {
          if (pagerChildren[i].classList.contains('active')) {
            if (pagerChildren[i].nextSibling.nextSibling === null) {
              pagerChildren[i].classList.remove('active');
              pagerChildren[i].nextSibling.classList.add('active');
              nextBtn.setAttribute('disabled', true);
              prevBtn.removeAttribute('disabled');
              config.watchPage.call(null, 10, parseInt(pagerChildren[i].nextSibling.innerText));
              break;
            } else {
              pagerChildren[i].classList.remove('active');
              pagerChildren[i].nextSibling.classList.add('active');
              prevBtn.removeAttribute('disabled');
              config.watchPage.call(null, 10, parseInt(pagerChildren[i].nextSibling.innerText));
              break;
            }
          }
        }
      },
      false
    );

    pagination.append(this.createTotal(config.pageSize), prevBtn, pager, nextBtn);

    return pagination;
  }

  createTotal(pageSize) {
    const cls = this._className;
    const span = createSpan(cls.total, `共 ${pageSize} 条`);
    return span;
  }

  createButton(type = 'previousPage' || 'nextPage') {
    const cls = this._className;
    const config = this._config;
    const pager = Math.ceil(config.pageSize / 10);

    const button = createEle('button', { className: cls.btn, innerText: `${t(type)}` });
    if (pager === 1) {
      button.setAttribute('disabled', true);
    }
    return button;
  }

  createPager() {
    const cls = this._className;
    const config = this._config;
    const pager = Math.ceil(config.pageSize / 10);
    const ul = createEle('ul', { className: cls.pager });
    for (let i = 1; i <= pager; i++) {
      const li = createEle('li', { className: cls.number, innerText: `${i}` });
      i === 1 && li.classList.add('active');
      ul.appendChild(li);
    }
    return ul;
  }

  /**
   * config: {
   *  pageSize: xxx,
   *  // pageSize 是数据的数量，pagerNum 是有多少页，默认给每页设置10条数据
   *  watchPage(pageSize, pagerNum) {
   *    console.log(pageSize, pagerNum);
   *  }
   * }
   */
  static newInstance(config) {
    const instance = new VuiPagination(config);
    instance.initUI();
    return instance;
  }
}
